<template>
  <luo-header></luo-header>
  <div class="app-content">
    <luo-aside></luo-aside>
    <div class="projects-section">
      <div class="projects-section-header">
        <p>{{ proxy.$store.getters.currentIndex }}</p>
        <p class="time">
          {{ new Date().getMonth() + 1 }}月{{ new Date().getDate() }}日
        </p>
      </div>

      <div class="project-boxes jsGridView">
        <!-- 主界面 -->
        <div class="content-box">
          <router-view></router-view>
        </div>
      </div>
    </div>

    <div class="messages-section">
      <button class="messages-close">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-x-circle"
        >
          <circle cx="12" cy="12" r="10" />
          <line x1="15" y1="9" x2="9" y2="15" />
          <line x1="9" y1="9" x2="15" y2="15" />
        </svg>
      </button>
      <div class="projects-section-header">
        <p>信箱</p>
      </div>
      <div class="messages">
        <div class="message-box" v-for="item in letterList" :key="item.id">
          <img
            :src="HttpManager.attachImageUrl(item.avator)"
            alt="profile image"
          />
          <div class="message-content">
            <div class="message-header">
              <div class="name">{{ item.username }}</div>
              <div class="star-checkbox">
                <input type="checkbox" id="star-1" />
                <label for="star-1">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-star"
                  >
                    <polygon
                      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                    />
                  </svg>
                </label>
              </div>
            </div>
            <p class="message-line">
              {{ item.content }}
            </p>
            <p class="message-line time">
              {{ new Date(item.create_time).toLocaleString() }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import LuoHeader from "@/components/layouts/LuoHeader.vue";
import { HttpManager } from "@/api";
import LuoAside from "@/components/layouts/LuoAside.vue";
import emitter from "@/utils/emitter";
import {
  defineComponent,
  getCurrentInstance,
  watch,
  ref,
  reactive,
  computed,
  onMounted,
} from "vue";

export default defineComponent({
  components: {
    LuoHeader,
    LuoAside,
  },
  setup() {
    const collapse = ref(false);
    const letterList = ref([]);
    const { proxy } = getCurrentInstance();

    async function getData() {
      const result = (await HttpManager.getAllLetter()) as ResponseBody;
      letterList.value = result.data;
    }

    onMounted(() => {
      getData();
    });

    emitter.on("collapse", (msg) => {
      collapse.value = msg as boolean;
    });

    return { collapse, letterList, HttpManager, proxy };
  },
});
</script>

<style scoped>
@import ".././assets/css/style.css";
.content-box {
  transition: left 0.3s ease-in-out;
  padding: 20px;
  width: 1200vh;
  overflow-x: hidden;
}

.content-collapse {
  left: 65px;
}
.messages-section {
  height: 88vh;
}
</style>
